<template>
  <div class="charge-billing-container">
    <!-- 左侧树形结构区域 -->
    <div class="left-tree-panel">
      <div class="tree-header">
        <h4>
          <i class="el-icon-office-building"></i>
          楼栋用房分类
        </h4>
      </div>
      <div class="tree-search">
        <el-input 
          v-model="treeSearchText" 
          placeholder="请输入楼栋内容" 
          size="small" 
          clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="tree-container">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="custom-tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-node-label">
              <i :class="getNodeIcon(data)" class="tree-node-icon"></i>
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="right-content-panel">
      <div class="charge-billing">
        <!-- Tab切换 -->
        <div class="tab-container">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
            <el-tab-pane label="能源缴费" name="energy-billing">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-lightning"></i>
                  能源缴费
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="合并缴费" name="merged-billing">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-collection"></i>
                  合并缴费
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="物业费" name="property-fee">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-house"></i>
                  物业费
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 搜索筛选区 -->
        <div class="filter-container">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="房间信息:">
              <el-input 
                v-model="filterForm.roomInfo" 
                placeholder="请输入"
                clearable
                class="filter-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="业主信息:">
              <el-input 
                v-model="filterForm.businessInfo" 
                placeholder="请输入"
                clearable
                class="filter-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话号码:">
              <el-input 
                v-model="filterForm.phone" 
                placeholder="请输入"
                clearable
                class="filter-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否欠费:">
              <el-select 
                v-model="filterForm.isArrears" 
                placeholder="全部"
                clearable
                class="filter-select"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="是" value="yes"></el-option>
                <el-option label="否" value="no"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报警状态:">
              <el-select 
                v-model="filterForm.alarmStatus" 
                placeholder="全部"
                clearable
                class="filter-select"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="正常" value="normal"></el-option>
                <el-option label="报警" value="alarm"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 操作按钮区 -->
        <div class="action-container">
          <div class="action-buttons">
            <el-button type="success" icon="el-icon-money" @click="batchCharge">缴费记录</el-button>
            <el-button type="warning" icon="el-icon-download" @click="exportData">导出表格</el-button>
            <el-button type="info" icon="el-icon-view" @click="viewChargeRecord">批量缴费</el-button>
            <el-button type="primary" icon="el-icon-check" @click="confirmBilling">确认订单</el-button>
          </div>
        </div>
        <!-- 数据表格 -->
        <div class="table-container">
          <div class="table-header">
            <div class="table-title">
              <i class="el-icon-tickets"></i>
              缴费列表
            </div>
            <div class="table-info">
              共 {{ tableData.length }} 条数据
            </div>
          </div>
          <el-table 
            :data="tableData" 
            border
            style="width: 100%"
            :header-cell-style="headerCellStyle"
            class="custom-table"
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="roomInfo" label="房间信息" width="150" align="center"></el-table-column>
            <el-table-column prop="businessInfo" label="业主信息" width="120" align="center"></el-table-column>
            <el-table-column prop="contactPhone" label="电话号码" width="140" align="center"></el-table-column>
            <el-table-column prop="electricMeterNumber" label="电表表号" width="100" align="center"></el-table-column>
            <el-table-column prop="waterMeterNumber" label="水表表号" width="100" align="center"></el-table-column>
            <el-table-column prop="mediaMeterNumber" label="媒体表号" width="100" align="center"></el-table-column>
            <el-table-column prop="mergeBilling" label="合并计费" width="100" align="center">
              <template slot-scope="scope">
                <el-tag 
                  size="small" 
                  :type="scope.row.mergeBilling === '已合并' ? 'success' : 'warning'"
                >
                  {{ scope.row.mergeBilling }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remainingAmount" label="余额(元)" width="100" align="center">
              <template slot-scope="scope">
                <span :class="scope.row.remainingAmount > 0 ? 'positive-amount' : 'negative-amount'">
                  {{ scope.row.remainingAmount }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button 
                  type="primary" 
                  size="mini" 
                  icon="el-icon-money"
                  @click="openChargeDialog(scope.row)"
                >
                  充值缴费
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 底部统计 -->
          <div class="table-footer">
            <div class="summary-info">
              <span class="summary-item">
                <strong>总余额: {{ totalAmount }}</strong>
              </span>
              <span class="summary-item">
                <strong>总欠费: {{ totalDebt }}</strong>
              </span>
            </div>
          </div>
        </div>
        <!-- 充值缴费弹窗 -->
        <el-dialog
          title="充值缴费"
          :visible.sync="showChargeDialog"
          width="1000px"
          class="charge-billing-dialog"
          :close-on-click-modal="false"
        >
          <div class="charge-dialog-content">
            <!-- 左侧充值区域 -->
            <div class="charge-section">
              <div class="section-header">
                <h3>
                  <i class="el-icon-money"></i>
                  充值缴费
                </h3>
              </div>
              <div class="charge-form">
                <div class="account-balance">
                  <div class="balance-display">
                    <span class="balance-label">账户余额</span>
                    <div class="balance-amount">
                      <span class="currency">¥</span>
                      <span class="amount">{{ selectedTenant ? selectedTenant.remainingAmount : 0 }}</span>
                      <span class="unit">元</span>
                    </div>
                    <div class="balance-note">预存: 9950元,补扣: 0元</div>
                  </div>
                </div>
                <el-form :model="chargeForm" label-width="100px" class="custom-form">
                  <el-form-item label="请输入金额:">
                    <el-input 
                      v-model="chargeForm.amount" 
                      placeholder="请输入金额"
                      type="number"
                      class="amount-input"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="大写:">
                    <span class="amount-chinese">{{ getChineseAmount(chargeForm.amount) }}</span>
                  </el-form-item>
                  <el-form-item label="缴费类型:">
                    <el-radio-group v-model="chargeForm.paymentType" class="payment-type-group">
                      <el-radio label="保存">保存</el-radio>
                      <el-radio label="退费">退费</el-radio>
                      <el-radio label="补助">补助</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="备注:">
                    <el-input 
                      v-model="chargeForm.remark" 
                      placeholder="请输入备注"
                      type="textarea"
                      :rows="3"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button 
                      type="primary" 
                      @click="confirmCharge"
                      :loading="charging"
                      class="charge-btn"
                    >
                      {{ charging ? '处理中...' : '确认保存' }}
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <!-- 右侧缴费详情 -->
            <div class="detail-section">
              <div class="section-header">
                <h3>
                  <i class="el-icon-document"></i>
                  缴费详情
                </h3>
                <div class="detail-time">
                  次费跳闸明细时间: {{ currentTime }}
                </div>
              </div>
              <el-table 
                :data="chargeDetailData" 
                border 
                size="small"
                style="width: 100%"
                class="detail-table"
                row-class-name="white-row"
              >
                <el-table-column prop="type" label="类型" width="80" align="center"></el-table-column>
                <el-table-column prop="meterNumber" label="仪表表号" width="100" align="center"></el-table-column>
                <el-table-column prop="lastMonth" label="本月用量" width="80" align="center"></el-table-column>
                <el-table-column prop="thisMonth" label="上月用量" width="80" align="center"></el-table-column>
                <el-table-column prop="consumption" label="消费金额" width="80" align="center"></el-table-column>
                <el-table-column prop="thisMonthAmount" label="本月金额" width="80" align="center"></el-table-column>
                <el-table-column prop="status" label="通讯状态" width="80" align="center">
                  <template slot-scope="scope">
                    <el-tag 
                      size="mini" 
                      :type="scope.row.status === '失败' ? 'danger' : 'success'"
                    >
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="lastUpdateTime" label="最后通讯时间" width="140" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 缴费记录 -->
          <div class="charge-records">
            <div class="records-header">
              <h4>
                <i class="el-icon-time"></i>
                缴费记录
              </h4>
            </div>
            <el-table 
              :data="chargeRecords" 
              border 
              size="small"
              style="width: 100%"
              max-height="200"
              row-class-name="white-row"
            >
              <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="type" label="缴费类型" width="80" align="center"></el-table-column>
              <el-table-column prop="paymentMethod" label="清零金额" width="80" align="center"></el-table-column>
              <el-table-column prop="amount" label="缴费来源" width="80" align="center"></el-table-column>
              <el-table-column prop="balance" label="缴费金额 (元)" width="100" align="center"></el-table-column>
              <el-table-column prop="status" label="余额 (元)" width="80" align="center"></el-table-column>
              <el-table-column prop="operator" label="操作人" width="80" align="center"></el-table-column>
              <el-table-column prop="time" label="是否成功" width="80" align="center">
                <template slot-scope="scope">
                  <el-tag 
                    size="mini" 
                    :type="scope.row.status === '成功' ? 'success' : 'danger'"
                  >
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button 
                    type="primary" 
                    size="mini" 
                    icon="el-icon-printer"
                    @click="printRecord(scope.row)"
                  >
                    票据打印
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showChargeDialog = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import chargeBillingMock from '@/api/mock/chargeBilling'
export default {
  name: 'ChargeBilling',
  data() {
    return {
      // 树形结构相关
      treeSearchText: '',
      treeData: [],
      selectedNode: null,
      treeProps: {
        children: 'children',
        label: 'label'
      },
      activeTab: 'energy-billing',
      loading: false,
      charging: false,
      tableData: [],
      totalAmount: 100,
      totalDebt: -9950,
      filterForm: {
        roomInfo: '',
        businessInfo: '',
        phone: '',
        isArrears: '',
        alarmStatus: ''
      },
      showChargeDialog: false,
      selectedTenant: null,
      chargeForm: {
        amount: '',
        paymentType: '保存',
        remark: ''
      },
      chargeDetailData: [
        {
          type: '电表',
          meterNumber: '0',
          lastMonth: '0',
          thisMonth: '0',
          consumption: '0',
          thisMonthAmount: '0',
          status: '失败',
          lastUpdateTime: ''
        },
        {
          type: '电表',
          meterNumber: '0',
          lastMonth: '0',
          thisMonth: '0',
          consumption: '0',
          thisMonthAmount: '0',
          status: '失败',
          lastUpdateTime: ''
        },
        {
          type: '电表',
          meterNumber: '0',
          lastMonth: '0',
          thisMonth: '0',
          consumption: '0',
          thisMonthAmount: '0',
          status: '失败',
          lastUpdateTime: ''
        },
        {
          type: '电表',
          meterNumber: '0',
          lastMonth: '0',
          thisMonth: '0',
          consumption: '0',
          thisMonthAmount: '0',
          status: '失败',
          lastUpdateTime: ''
        }
      ],
      chargeRecords: [],
      currentTime: '',
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.loadTreeData()
    this.loadData()
    this.updateCurrentTime()
  },
  methods: {
    // 加载树形结构数据 - 使用mock数据
    loadTreeData() {
      // 直接使用mock数据，避免API请求
      this.treeData = [
        {
          id: 1,
          label: '楼栋用房分类',
          children: [
            {
              id: 2,
              label: '宿舍',
              children: [
                {
                  id: 3,
                  label: 'A栋',
                  children: [
                    { id: 4, label: '101', roomId: 101, buildingId: 3 },
                    { id: 5, label: '102', roomId: 102, buildingId: 3 },
                    { id: 6, label: '103', roomId: 103, buildingId: 3 },
                    { id: 7, label: '104', roomId: 104, buildingId: 3 }
                  ]
                }
              ]
            },
            {
              id: 8,
              label: '二层',
              children: [
                {
                  id: 9,
                  label: 'B栋',
                  children: [
                    { id: 10, label: '201', roomId: 201, buildingId: 9 },
                    { id: 11, label: '202', roomId: 202, buildingId: 9 },
                    { id: 12, label: '203', roomId: 203, buildingId: 9 }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    
    // 树形结构过滤方法
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    
    // 树形节点点击事件
    handleNodeClick(data) {
      console.log('选中节点:', data)
      this.selectedNode = data
      // 根据选中的节点过滤表格数据
      this.loadData()
    },
    
    // 获取节点图标
    getNodeIcon(data) {
      if (data.roomId) {
        return 'el-icon-house'
      } else if (data.buildingId) {
        return 'el-icon-office-building'
      } else if (data.children && data.children.length > 0) {
        return 'el-icon-folder-opened'
      } else {
        return 'el-icon-folder'
      }
    },
    loadData() {
      this.loading = true
      setTimeout(() => {
        let response = chargeBillingMock
        let filteredData = response.msg.list

        // 根据选中的树节点过滤数据
        if (this.selectedNode && this.selectedNode.roomId) {
          filteredData = filteredData.filter(item => 
            item.roomInfo.includes(this.selectedNode.label)
          )
        }

        // Apply filterForm filters
        if (this.filterForm.roomInfo) {
          filteredData = filteredData.filter(item => item.roomInfo.includes(this.filterForm.roomInfo))
        }
        if (this.filterForm.businessInfo) {
          filteredData = filteredData.filter(item => item.businessInfo.includes(this.filterForm.businessInfo))
        }
        if (this.filterForm.phone) {
          filteredData = filteredData.filter(item => item.contactPhone.includes(this.filterForm.phone))
        }
        if (this.filterForm.isArrears) {
          const isArrearsText = this.filterForm.isArrears === 'yes' ? '是' : '否'
          filteredData = filteredData.filter(item => item.isArrears === isArrearsText)
        }
        if (this.filterForm.alarmStatus) {
          const alarmStatusText = this.filterForm.alarmStatus === 'normal' ? '正常' : '报警'
          filteredData = filteredData.filter(item => item.alarmStatus === alarmStatusText)
        }

        this.tableData = filteredData
        this.totalAmount = response.msg.totalAmount
        this.totalDebt = response.msg.totalDebt
        this.chargeRecords = response.msg.chargeRecords
        this.loading = false
      }, 500)
    },
    handleTabClick(tab) {
      console.log('切换到:', tab.name)
      this.loadData()
    },
    searchData() {
      this.loadData()
    },
    resetFilter() {
      this.filterForm = {
        roomInfo: '',
        businessInfo: '',
        phone: '',
        isArrears: '',
        alarmStatus: ''
      }
      this.selectedNode = null
      this.$refs.tree.setCurrentKey(null)
      this.loadData()
    },
    batchCharge() {
      this.$message.success('缴费记录功能')
    },
    exportData() {
      this.$message.success('导出表格功能')
    },
    viewChargeRecord() {
      this.$message.success('批量缴费功能')
    },
    confirmBilling() {
      this.$message.success('确认订单功能')
    },
    openChargeDialog(row) {
      this.selectedTenant = row
      this.showChargeDialog = true
      this.chargeForm = {
        amount: '',
        paymentType: '保存',
        remark: ''
      }
    },
    confirmCharge() {
      if (!this.chargeForm.amount) {
        this.$message.warning('请输入充值金额')
        return
      }
      this.charging = true
      setTimeout(() => {
        this.$message.success('充值成功')
        this.charging = false
        this.showChargeDialog = false
        this.loadData()
      }, 1000)
    },
    printRecord(record) {
      this.$message.success('打印票据: ' + record.id)
    },
    getChineseAmount(amount) {
      if (!amount) return '零元整'
      // 简化的中文金额转换
      return '零元整'
    },
    updateCurrentTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN')
      setInterval(() => {
        const now = new Date()
        this.currentTime = now.toLocaleString('zh-CN')
      }, 1000)
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.charge-billing-container {
  display: flex;
  height: calc(100vh - 120px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 左侧树形结构面板 */
.left-tree-panel {
  width: 300px;
  background: white;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 0 24px 24px;
}

.tree-header {
  padding: 20px 20px 0;
  border-bottom: 1px solid #e9ecef;
}

.tree-header h4 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-header h4 i {
  color: #3498db;
  font-size: 18px;
}

.tree-search {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.tree-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.custom-tree {
  background: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-node-icon {
  color: #3498db;
  font-size: 16px;
}

/* 右侧内容面板 */
.right-content-panel {
  flex: 1;
  background: white;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 24px 24px 0;
  padding: 24px;
}

/* 原有的 charge-billing 样式调整 */
.charge-billing {
  padding: 0;
  background: none;
  min-height: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 24px;
}
/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title i {
  color: #3498db;
  font-size: 28px;
}
/* Tab容器 */
.tab-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}
.custom-tabs {
  padding: 0 24px;
}
.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 24px;
}
.filter-form {
  margin: 0;
}
.filter-input {
  width: 180px;
}
.filter-select {
  width: 120px;
}
/* 操作按钮区 */
.action-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 20px 24px;
}
.action-buttons {
  display: flex;
  gap: 12px;
}
.action-buttons .el-button {
  border-radius: 8px;
  font-weight: 500;
}
/* 表格容器 */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #3498db;
  font-size: 20px;
}
.table-info {
  color: #6c757d;
  font-size: 14px;
}
.positive-amount {
  color: #27ae60;
  font-weight: 600;
}
.negative-amount {
  color: #e74c3c;
  font-weight: 600;
}
.table-footer {
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}
.summary-info {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.summary-item {
  color: #2c3e50;
  font-size: 16px;
}
/* 充值缴费弹窗样式 */
.charge-dialog-content {
  display: flex;
  gap: 20px;
}
.charge-section {
  flex: 1;
  border-right: 1px solid #e9ecef;
  padding-right: 20px;
}
.detail-section {
  flex: 1;
  padding-left: 20px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
}
.section-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-header h3 i {
  color: #3498db;
}
.detail-time {
  font-size: 14px;
  color: #6c757d;
}
.account-balance {
  background: linear-gradient(45deg, #e0f7fa, #b2ebf2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.balance-label {
  font-size: 14px;
  color: #00796b;
  display: block;
  margin-bottom: 8px;
}
.balance-amount {
  font-size: 36px;
  font-weight: 700;
  color: #004d40;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.balance-amount .currency {
  font-size: 24px;
  margin-right: 5px;
}
.balance-amount .unit {
  font-size: 18px;
  margin-left: 5px;
}
.balance-note {
  font-size: 12px;
  color: #00796b;
  margin-top: 5px;
}
.amount-input {
  width: 100%;
}
.amount-chinese {
  color: #606266;
  font-size: 14px;
}
.payment-type-group .el-radio {
  margin-right: 20px;
}
.charge-btn {
  width: 100%;
}
.charge-records {
  margin-top: 20px;
  border-top: 1px solid #e9ecef;
  padding-top: 20px;
}
.records-header {
  margin-bottom: 15px;
}
.records-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.records-header h4 i {
  color: #3498db;
}
/* 响应式设计 */
@media (max-width: 1200px) {
  .charge-dialog-content {
    flex-direction: column;
  }
  .charge-section {
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    padding-right: 0;
    padding-bottom: 20px;
  }
  .detail-section {
    padding-left: 0;
    padding-top: 20px;
  }
}
@media (max-width: 768px) {
  .charge-billing {
    padding: 16px;
  }
  .filter-form {
    flex-direction: column;
  }
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .action-buttons {
    flex-wrap: wrap;
  }
  .summary-info {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* 弹窗背景色修改 */
.charge-billing-dialog .el-dialog {
  background-color: #ffffff !important;
}

.charge-billing-dialog .el-dialog__header {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.charge-billing-dialog .el-dialog__body {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.charge-billing-dialog .el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.charge-billing-dialog .charge-dialog-content {
  background-color: #ffffff !important;
}

.charge-billing-dialog .charge-section {
  background-color: #ffffff !important;
}

.charge-billing-dialog .detail-section {
  background-color: #ffffff !important;
}

.charge-billing-dialog .charge-records {
  background-color: #ffffff !important;
}

.charge-billing-dialog .el-table {
  background-color: #ffffff !important;
}

.charge-billing-dialog .el-table th {
  background-color: #f5f7fa !important;
}

.charge-billing-dialog .el-table td {
  background-color: #ffffff !important;
}

.charge-billing-dialog .el-table__row {
  background-color: #ffffff !important;
}

.charge-billing-dialog .el-table__row--striped td {
  background-color: #ffffff !important;
}
</style>




.white-row {
  background-color: #ffffff !important;
}

.white-row.el-table__row--striped {
  background-color: #ffffff !important;
}


